<template>
  <div class="app-container" style="background: #f3f3f4">
    <el-container class="showHome">
      <el-main>
        <div style="height: 111px">
          <el-card v-for="(item, index) in head" :key="index" class="box-card">
            <div style="width: 20%; margin-left: 10%; float: left">
              <el-image :src="item.img" width="45px" height="45px" />
            </div>
            <div
              style="float: left; width: 65%; margin-left: 5%; font-size: 14px"
            >
              <span class="head" @click="toPage(item.path)" style="cursor: pointer">{{
                item.label
              }}</span>
            </div>
            <div class="span" @click="toPage(item.path)" style="cursor: pointer">
              {{ item.number }}
            </div>
          </el-card>
        </div>
        <div
          style="
            width: 99%;
            height: 200px;
            margin: 10px 0 10px 0;
            background: #fff;
            border-radius: 5px;
            color: rgb(51, 51, 51);
          "
        >
          <div style="height: 40px; padding: 14px 14px 0 14px">
            <span style="float: left; font-size: 16px; font-weight: bold"
              >常用功能</span
            >
            <i class="el-icon-edit" style="float: right" />
          </div>
          <div class="bodyContent">
            <div v-for="(item, index) in head2" :key="index" class="box-card2">
              <a href="#">
                <i
                  :style="{
                    backgroundImage: 'url(' + item.img + ')',
                    display: 'block',
                    float: 'left',
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                    width: '32px',
                    height: '36px',
                  }"
                />
                <span style="margin: 10px 15px" @click="toPage2(item.path)">{{
                  item.label
                }}</span>
              </a>
            </div>
          </div>
        </div>
     <div v-if="false" style="width: 99%; height: 190px; margin: 10px 0">
       
       <div style="height: 20px; background: #fff;padding: 5px 5px 5px 5px">
              <span
                style="
                  float: left;
                  font-size: 16px;
                  color: rgb(51, 51, 51);
                  font-weight: bold;
                "
                > 完工入库</span
              >
            </div>
        <div id="echart_1" class="echart" style="width: 100%; height: 170px;background: #fff;" ></div>
      </div>
         <div v-if="false" style="width: 99%; height: 410px; margin: 10px 0">
          <div
            style="
              width: 49%;
              float: left;
              margin-right: 1%;
              background: #fff;
              height: 410px;
            "
          >
            <div style="height: 40px; padding: 15px 15px 15px 15px">
              <span
                style="
                  float: left;
                  font-size: 16px;
                  color: rgb(51, 51, 51);
                  font-weight: bold;
                "
                >2020年12月订单分析总表</span
              >
            </div>
            <div style="height: 340px; padding: 7px 0; width: 100%">
              <div id="lineChart" style="width: 100%; height: 340px" />
            </div>
          </div>
          <div style="width: 50%; height: 410px; float: left; background: #fff">
            <div style="height: 40px; padding: 15px 15px 15px 15px">
              <span
                style="
                  font-size: 16px;
                  font-weight: bold;
                  float: left;
                  color: rgb(51, 51, 51);
                "
                >订单趋势</span
              >
               <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 3 }"
                @click="queryYear"
                >本年</el-button
              >
              <el-button
                class="trend"
                size="mini"
                :class="{ default: show == 2 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryLastMonth"
                >上月</el-button
              >
              <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 1 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryMonth"
                >本月</el-button
              > -
            </div>
            <div id="lineChart3" style="width: 100%; height: 340px" />
          </div>
        </div>

         <div v-if="false" style="width: 99%; height: 410px">
          <div
            style="
              width: 49%;
              float: left;
              margin-right: 1%;
              background: #fff;
              height: 410px;
            "
          >
            <div style="height: 40px; padding: 15px 15px 15px 15px">
              <span
                style="
                  float: left;
                  font-size: 16px;
                  color: rgb(51, 51, 51);
                  font-weight: bold;
                "
                >资产情况</span
              >
              <i
                :style="{
                  backgroundImage: 'url(' + img9 + ')',
                  float: 'left',
                  width: '19px',
                  height: '19px',
                  marginTop: '3px',
                  marginLeft: '5px',
                }"
              />
            </div>
            <div
              style="
                color: #676a6c;
                width: 96%;
                background: #f4f7fe;
                height: 30px;
                margin: 10px 2%;
                padding: 7px 10px 0 30px;
                font-size: 15px;
                font-weight: bold;
              "
            >
              <span style="font-size: 1em; font-weight: bold; float: left"
                >总资产</span
              >
              <span style="font-size: 1em; font-weight: bold; float: right"
                >{{ totalAsset }}元</span
              >
            </div>
            <div
              style="
                color: #676a6c;
                width: 96%;
                height: 200px;
                margin: 0 2%;
                padding: 10px 10px 0 10px;
                float: left;
                font-size: 14px;
                font-weight: 600;
              "
            >
              <div style="float: left; width: 50%; text-align: center">
                <el-image :src="img9" style="width: 156px; height: 156px" />
              </div>
              <div
                style="
                  height: 120px;
                  float: right;
                  width: 48%;
                  margin-left: 8px;
                  padding: 15px 0;
                "
              >
                <div class="balance">
                  <i class="dot" style="background: #ed5565" />
                  <span>账户余额</span>
                  <span style="float: right">{{ accountBalance }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #5050d6" />
                  <span>库存总额</span>
                  <span style="float: right">{{ inventoryAmount }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #ba55d3" />
                  <span>固定资产</span>
                  <span style="float: right">{{ fixedAssets }}元</span>
                </div>
                <div class="balance">
                  <i class="dot" style="background: #1ab394" />
                  <span>应收欠款</span>
                  <span style="float: right">{{ receivableDebt }}元</span>
                </div>
                <div class="balance" style="color: red">
                  <i class="dot" style="background: #f8ac59" />
                  <span>应付欠款</span>
                  <span style="float: right">{{ dealDebt }}元</span>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 50%; height: 410px; float: left; background: #fff">
            <div style="height: 40px; padding: 15px 15px 15px 15px">
              <span
                style="
                  font-size: 16px;
                  font-weight: bold;
                  float: left;
                  color: rgb(51, 51, 51);
                "
                >生产统计</span
              >
              <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 3 }"
                @click="queryYear"
                >本年</el-button
              >
              <el-button
                class="trend"
                size="mini"
                :class="{ default: show == 2 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryLastMonth"
                >上月</el-button
              >
              <el-button
                size="mini"
                class="trend"
                :class="{ default: show == 1 }"
                style="border-right: 1px solid #8f8f8f"
                @click="queryMonth"
                >本月</el-button
              >
            </div>
            <div id="lineChart2" style="width: 100%; height: 340px" />
          </div>
        </div>
      </el-main>
      <el-aside width="340px">
        <div
          style="
            width: 100%;
            height: 320px;
            border-radius: 5px;
            padding: 10px 10px;
            background: #fff;
          "
        >
          <span style="margin: 5px 10px; font-size: 16px; font-weight: bold"
            >公告</span
          >
          <div class="asideOne">
            <i class="dot" style="background: #ed5565; margin: 4px 8px" />
            <span>《ERP系统》试运行通知， 地点： 时间：2021年07月15日14：00-16:00 </span>
            <span class="asideRight">{{ accountBalance }}</span>
          </div>
          
         
        </div>
        <div
          style="
            width: 100%;
            height: 200px;
            border-radius: 5px;
            margin: 10px 0;
            padding: 10px 10px;
            background: #fff;
          "
        >
          <span style="margin: 5px 10px; font-size: 16px; font-weight: bold"
            >系统负责人</span
          >
          <div
            style="
              padding: 20px 10px;
              font-size: 14px;
              color: rgb(153, 153, 153);
            "
          >
            <span>
   IT：    电话：</span>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 200px;
            border-radius: 5px;
            margin: 10px 0;
            padding: 10px 10px;
            background: #fff;
          "
        >
          <span style="margin: 5px 10px; font-size: 16px; font-weight: bold"
            ></span
          >
          <div
            style="
              padding: 20px 10px;
              font-size: 14px;
              color: rgb(153, 153, 153);
            "
          >
            <!-- <span>内线：335699 </span><br>
            <span>手机：13929192022 </span> -->

          </div>
        </div>
        <div
          style="
            width: 100%;
            height: 410px;
            border-radius: 5px;
            margin: 10px 0;
            padding: 0 10px;
            background: #fff;
          "
        >
          <span style="margin: 5px 10px; font-size: 16px; font-weight: bold" />
          <div
            style="padding: 0 10px; font-size: 14px; color: rgb(153, 153, 153)"
          >
            <span />
          </div>
        </div>
        
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import one from "@/assets/imgs/img10.png";
import two from "@/assets/imgs/img11.png";
import three from "@/assets/imgs/img12.png";
import four from "@/assets/imgs/img13.png";
import img1 from "@/assets/imgs/img1.png";
import img2 from "@/assets/imgs/img2.png";
import img3 from "@/assets/imgs/img3.png";
import img4 from "@/assets/imgs/img4.png";
import img5 from "@/assets/imgs/img5.png";
import img6 from "@/assets/imgs/img6.png";
import img7 from "@/assets/imgs/img7.png";
import img8 from "@/assets/imgs/img8.png";
import img9 from "@/assets/imgs/img9.png";
import { GetSystem } from "@/api/datalistQueue";
import CountTo from "vue-count-to";
import { mapGetters } from "vuex";
import echarts from "echarts";
import {
  GetInterfaceError,
  GetInterfaceNumByMM,
  getMyWork,
  getDataList1
} from "@/api/datalistQueue";
export default {
  name: "/dashboard",
  data() {
    return {
       Search: {
        // 查询条件
        total: 0, // 总记录数
        pageSize: 13, // 一页显示的记录数
        page: 1, // /当前页码
        RNO: "01", // 表编号  根据Controller中对应的表编号 //更改
        jsWhere: "", // 自定义条件
        Status: 0,
       
      },
      img9: img9,
      head: [
        { label: "待办事项", img: three, number: "",path: "/Common/MyWork" },
        { label: "通知", img: two, number: "",path: "/Common/MyMessage" },
        { label: "", img: one, number: "" ,path: ""},
        { label: "", img: four, number: "" ,path: ""},
      ],
      head2: [
        { label: "销售订单", img: img1, path: "" },
        { label: "采购订单", img: img2, path: "" },
        { label: "生产订单", img: img3, path: "" },
        { label: "发货订单", img: img4, path: "" },
        { label: "采购入库", img: img5, path: "" },
        { label: "生产入库", img: img6, path: "" },
        { label: "生产出库", img: img7, path: "" },
        { label: "收款订单", img: img8, path: "" },
         { label: "付款订单", img: img9, path: "" },
      ],   option_1: {
        // backgroundColor: "#05224d",
        tooltip: {},
        grid: {
          top: "8%",
          left: "3%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          show: true,
          itemGap: 50,
          data: ["人均小时产量"],
          textStyle: {
            color: "#5087EC",
            borderColor: "#5087EC",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#000",
                margin: 15,
              },
            },
            axisTick: {
              show: false,
            },
            data: [
              "5/3",
              "5/4",
              "5/5",
              "5/6",
              "5/7",
              "5/8",
              "5/9",
              "5/10",
             
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#DDDDDD",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "日产量",
            type: "line",
            // smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#28ffb3", // 线条颜色
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#000",
              },
            },
            itemStyle: {
              normal: {
                color: "#FFD43E",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,154,120,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [33, 48, 25, 31, 39, 24, 27, 33, 48, 25, 31, 39, 24],
          },
          {
            name: "日产量",
            type: "bar",
            barWidth: 30,
            tooltip: {
              show: false,
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(0,154,120,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0, 0)",
                  },
                ]),
                color: function (params) {
                  var colorList = [
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                    "#5087EC",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [33, 48, 25, 31, 39, 24, 27, 33, 48, 25, 31, 39, 24],
          },
        ],
      },
      totalAsset: "0.00", // 总资产
      totalAmount: "0.00", // 库存总额
      accountBalance: "", // 账户余额
      inventoryAmount: "0.00", // 库存余额
      fixedAssets: "0.00", // 固定资产
      receivableDebt: "0.00", // 应收欠款
      dealDebt: "0.00", // 应付欠款
      show: 1,
      systems: [],
      interfaceError: [],
      chart: null,
      chart2: null,
      valuename0:0,
    };
  },
  computed: {
    ...mapGetters(["menus"]),
  },
  mounted() {
       this.getData_1();
     this.drawLine();
    
    this.$nextTick(() => {
      this.initChart();
    });
  
  },
  created() {
    this.getDataList();
    let data = this.menus;
     
    data.forEach((m) => {
     
      if (m.path == "/MesSales") {
         
        m.children.forEach((n) => {
          
          if (n.path == "SOrderBill") {
            this.head2[0].path = "/MesSales/SOrderBill";
          }
        });
      }

      if (m.path == "/Mespurchase") {
        m.children.forEach((n) => {
          if (n.path == "PUOrderBill") {
            this.head2[1].path = "/Mespurchase/PUOrderBill";
          }
        });
      }

      if (m.path == "/MesPo") {
        m.children.forEach((n) => {
          if (n.path == "PoOrdersBill") {
            this.head2[2].path = "/MesPo/PoOrdersBill";
          }
        });
      }

      if (m.path == "/MesSales") {
        m.children.forEach((n) => {
          if (n.path == "SalesdeliverBill") {
            this.head2[3].path = "/MesSales/SalesdeliverBill";
          }
        });
      }

      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PuInStockBill") {
            this.head2[4].path = "/MesWH/PuInStockBill";
          }
        });
      }

      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PoInStockBill") {
            this.head2[5].path = "/MesWH/PoInStockBill";
          }
        });
      }


      if (m.path == "/MesWH") {
        m.children.forEach((n) => {
          if (n.path == "PoOutStockBill") {
            this.head2[6].path = "/MesWH/PoOutStockBill";
          }
        });
      }


      if (m.path == "/MesAcc") {
        m.children.forEach((n) => {
          if (n.path == "AccCollectionMoneyOrderBill") {
            this.head2[7].path = "/MesAcc/AccCollectionMoneyOrderBill";
          }
        });
      }

      if (m.path == "/MesAcc") {
        m.children.forEach((n) => {
          if (n.path == "AccPaymentMoneyOrderBill") {
            this.head2[8].path = "/MesAcc/AccPaymentMoneyOrderBill";
          }
        });
      }
    });
  },
  methods: {
    // 跳转至代办页面
    toPage(path) {
      this.$router.push({
        path: path,
      });
    },
    // 常用工能跳转至代办页面
    toPage2(path) {

      if (path) {
        this.$router.push({
          path: path,
        });
      } else {
        this.$message.error("您没有查看权限！")
      }
    },  getData_1() {
      let xAxis = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
      let series_1 = [100, 200, 300, 400, 500, 60,100 , 700];
      let series_2 = [100, 200, 300, 400, 500, 60,100 , 700];
      this.option_1.xAxis.data = xAxis;
      this.option_1.series[0].data = series_1;
      this.option_1.series[1].data = series_2;
      this.drawChart("echart_1", this.option_1);
    },
        // 画图表
    drawChart(id, option) {
        var echarts = require("echarts");
      let myChart = echarts.init(document.getElementById(id));
      myChart.setOption(option, true);
      let chart = document.getElementById(id);
      echarts.init(chart).resize();
      //标签自动轮播
      let index = 0;
      if (!this.noNewTimer) {
        let mTimer = setInterval(() => {
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: index,
          });
          index++;
          if (index > 14) {
            index = 0;
          }
        }, 2000);
      }
    },
    // 查询生产统计本月
    queryMonth: function () {
      this.show = 1;
    },
    // 查询生产统计上月
    queryLastMonth: function () {
      this.show = 2;
    },
    // 查询生产统计本年
    queryYear: function () {
      this.show = 3;
    },
    async getSystem() {
      // 获取列表数据，通用

      const res = await GetSystem({});

      this.systems = res.data.Table;

      console.log(this.systems);
    },
    async getInterfaceError() {
      const res = await GetInterfaceError({});
      this.interfaceError = res.data.Table;
    },

    initChart() {
      var echarts = require("echarts");
      this.chart = echarts.init(document.getElementById("lineChart3"));
      this.setOptions(this.systems);
      this.chart2 = echarts.init(document.getElementById("lineChart"));
      this.setOptions2(this.interfaceError);
    },

    setOptions2(interfaceError) {
      this.chart2.setOption({
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "天星",
            "方振",
            "星星",
            "浩云",
            "快鸟",
            "京东",
            "天猫",
            "阿里云",
          ],
        },
        series: [
          {
            name: "费用",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 11398.5, name: "天星" },
              { value: 19404.5, name: "方振" },
              { value: 209127, name: "星星" },
              { value: 291000, name: "浩云" },
              { value: 845, name: "快鸟" },
              { value: 416446.9, name: "京东" },
              { value: 125800, name: "天猫" },
              { value: 25100, name: "阿里云" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    setOptions(systems) {
      this.chart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["2018年", "2019年"],
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}",
          },
        },
        series: [
          {
            name: "2018年",
            type: "line",
            data: [
              436.9,
              746.3,
              370.6,
              1396.2,
              717.9,
              670.5,
              887.5,
              991.5,
              1435.6,
              973,
              993.4,
              843.9,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "2019年",
            type: "line",
            data: [
              687.5,
              253.9,
              347.2,
              671.1,
              513.9,
              412.4,
              276.4,
              532.3,
              792.9,
              710.7,
              1400.1,
              1017.7,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
                /* {name: '年最低', value: -2, xAxis: 1, yAxis: -1.5} */
              ],
            },
            markLine: {
              data: [
                { type: "average", name: "平均值" },
                [
                  {
                    /* symbol: 'none',
				                        x: '90%',
				                        yAxis: 'max' */
                  },
                  {
                    /* symbol: 'circle',
				                        label: {
				                            position: 'start',
				                            formatter: '最大值'
				                        },
				                        type: 'max',
				                        name: '最高点' */
                  },
                ],
              ],
            },
          },
        ],

        /* title: {
                text: '订单趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['2018年', '2019年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月' ,'8月' , '9月','10月','11月','12月']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '2018年',
                    type: 'line',
                    stack: '总量',
                    data: [436.9, 746.3, 370.6, 1396.2, 717.9, 670.5, 887.5, 991.5, 1435.6, 973, 993.4,	843.9]
                },
                {
                    name: '2019年',
                    type: 'line',
                    stack: '总量',
                    data: [687.5, 253.9, 347.2, 671.1, 513.9, 412.4, 276.4, 532.3, 792.9, 710.7, 1400.1, 1017.7]
                }
            ] */
      });
    },
    async getDataList() {
      // 获取列表数据，通用
       
      const res = await getMyWork({ data: "" });
      this.head[0].number = JSON.parse(res.data1).Data.total;
      const ress = await getDataList1({ data: JSON.stringify(this.Search) });
     
        this.head[1].number = ress.data.Table1[0].RecordCount;
      
    },
    drawLine() {
      var echarts = require("echarts");
      const myCharts = echarts.init(document.getElementById("lineChart"));
      const myCharts2 = echarts.init(document.getElementById("lineChart2"));
      const myCharts3 = echarts.init(document.getElementById("lineChart3"));
      var option1 = {
        color: ["#ff81cb", "#87cefa"],
        title: {
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          center: "center",
          data: ["已入库", "未入库"],
        },
        series: [
          {
            name: "已入库",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 83.7, name: "已入库" },
              { value: 26.3, name: "未入库" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      var option2 = {
        color: ["#032f5e", "#f01c70"],
        legend: {
          data: ["收入", "支出"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1日",
              "4日",
              "7日",
              "11日",
              "15日",
              "19日",
              "23日",
              "27日",
              "30日",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "收入",
            type: "bar",
            data: [3000, 4900, 3670, 2320, 2560, 7670, 1356, 1622, 5260],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "支出",
            type: "bar",
            data: [2600, 1900, 3900, 2640, 1287, 2707, 1756, 1822, 4870],
            markPoint: {
              data: [
                { name: "月最高", value: 6400, xAxis: 10, yAxis: 6400 },
                { name: "月最低", value: 1260, xAxis: 10, yAxis: 6400 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      var option3 = {
        color: ["#87cefc", "#da70d5"],
        legend: {
          data: ["已达成", "未达成"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1日",
              "4日",
              "7日",
              "11日",
              "15日",
              "19日",
              "23日",
              "27日",
              "30日",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "已达成",
            type: "bar",
            data: [
              30000,
              43000,
              38670,
              12320,
              22560,
              37670,
              41356,
              51622,
              25260,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            name: "未达成",
            type: "bar",
            data: [12800, 9900, 11900, 8640, 6287, 5707, 11756, 7822, 14870],
            markPoint: {
              data: [
                { name: "月最高", value: 6400, xAxis: 10, yAxis: 6400 },
                { name: "月最低", value: 1260, xAxis: 10, yAxis: 6400 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      myCharts.setOption(option1);
      myCharts2.setOption(option2);
      myCharts3.setOption(option3);
    },
  },
};
</script>
<style scoped>
.showHome /deep/ .box-card {
  height: 111px;
  float: left;
  width: 24%;
  margin-right: 1%;
  padding-top: 15px;
}
.showHome /deep/ .box-card2 {
  height: 58px;
  width: 25%;
  float: left;
  padding-left: 40px;
}
.showHome /deep/ .el-card__body {
  padding: 0;
}

.bodyContent a {
  width: 100%;
  height: 58px;
  cursor: pointer;
  align-items: center;
  display: flex;
}

.asideRight {
  font-family: impact;
  font-weight: bold;
  font-size: 16px;
  color: red;
  float: right;
}
.box-card .head {
  background: #fff;
  border-radius: 5px;
  color: #999;
}
.box-card /deep/ .el-image {
  width: 45px;
  height: 45px;
}
.balance {
  height: 30px;
}
.bodyContent .el-image {
  width: 32px;
  height: 36px;
  margin-top: 15px;
}
.box-card .span {
  font-family: impact;
  font-weight: bold;
  clear: both;
  font-size: 26px;
  text-align: center;
  width: 82%;
  color: #676a6c;
}
.showHome /deep/ .el-main {
  padding: 0;
}
.default {
  color: #0a7dfa !important;
}
.dot {
  float: inherit;
  max-width: 12px;
  min-width: 12px;
  max-height: 12px;
  min-height: 12px;
  border-radius: 50%;
  margin: 5px 8px;
  float: left;
  display: block;
  margin-left: 5px;
}
.trend {
  float: right;
  width: 50px;
  background: #fff;
  color: #8f8f8f;
  border: hidden;
  cursor: pointer;
  border-radius: 0%;
  margin-top: -5px;
}
.showHome /deep/ .el-aside {
  padding: 0;
}
.asideOne {
  height: 45px;
  padding: 15px 5px;
  font-size: 14px;
  color: rgb(153, 153, 153);
  font-family: MicrosoftYaHei;
  border-bottom: 1px solid #f5f5f5;
}
</style>
